<template>
    <div class="qilin-QilinSearch">
        <QilinExplain title="搜索表单组件" date="2023-09-15">
            <template v-slot:content>
                <QilinSearch v-model:searchConfig="searchConfig" ref="searchConfigRef"></QilinSearch>
                <CodeMirror :codeValue="getCodeValue"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/
// 获取搜索表单组件元素DOM
const searchConfigRef=ref(null);


/*
    计算属性等代码区域
*/
const getCodeValue=computed(()=>{
    return `
        // 占位元素
        <QilinSearch v-model:searchConfig="searchConfig" ref="searchConfigRef"></QilinSearch>

        // 获取搜索表单组件元素DOM
        const searchConfigRef=ref(null);

        // 点击查询按钮事件监听
        const searchData=(formRef)=>{
            console.log(formRef);
        };
        // 点击重置按钮事件监听
        const resetData=(formRef)=>{
            console.log(formRef);
        };

        // 搜索表单配置项
        const searchConfig=reactive({
            moreConfig:{
                isShowMore:true
            },
            itemConfig:[
                {
                    labelName:"工号",
                    dataName:"employeeCode",
                    type:"input",
                    inputType:"text"
                },
                {
                    labelName:"姓名",
                    dataName:"userName",
                    type:"input",
                    inputType:"text"
                },
                {
                    labelName:"社保所属地",
                    dataName:"socialSecurityAddress",
                    type:"input",
                    inputType:"text"
                },
                {
                    labelName:"部门",
                    dataName:"deptName",
                    type:"input",
                    inputType:"text"
                }
            ],
            moreItemConfig:[
                {
                    labelName:"年份",
                    dataName:"year",
                    type:"date",
                    dateType:"year",
                    format:"YYYY",
                    valueFormat:"YYYY"
                },
                {
                    labelName:"月份",
                    dataName:"month",
                    type:"select",
                    dataListName:"monthList"
                },
                {
                    labelName:"工作区间",
                    dataName:"workInterval",
                    type:"date",
                    dateType:"daterange",
                    format:"YYYY-MM-DD",
                    valueFormat:"YYYY-MM-DD"
                }
            ],
            selectLists:{
                monthList:[
                    {
                        value:1,
                        label:"一月"
                    },
                    {
                        value:2,
                        label:"二月"
                    },
                    {
                        value:3,
                        label:"三月"
                    },
                    {
                        value:4,
                        label:"四月"
                    },
                    {
                        value:5,
                        label:"五月"
                    },
                    {
                        value:6,
                        label:"六月"
                    },
                    {
                        value:7,
                        label:"七月"
                    },
                    {
                        value:8,
                        label:"八月"
                    },
                    {
                        value:9,
                        label:"九月"
                    },
                    {
                        value:10,
                        label:"十月"
                    },
                    {
                        value:11,
                        label:"十一月"
                    },
                    {
                        value:12,
                        label:"十二月"
                    }
                ]
            },
            buttonConfig:[
                {
                    btnName:"查询",
                    type:"primary",
                    size:"default",
                    formRefName:searchConfigRef,
                    click:searchData
                },
                {
                    btnName:"重置",
                    type:"default",
                    size:"default",
                    formRefName:searchConfigRef,
                    click:resetData
                }
            ],
            submitData:{
                employeeCode:"",
                userName:"",
                socialSecurityAddress:"",
                deptName:"",
                year:"",
                month:"",
                workInterval:""
            }
        });
        // 配置项代码注释
        searchConfig:{
            type:Object,
            default(){
                return {
                    // 更多配置项扩展
                    moreConfig:{
                        isShowMore:false, //是否显示展开收缩功能，默认不显示
                        // showMore:false //是否展开更多搜索选项，默认不展开
                    },
                    // el-form表单元素的相关配置
                    elFormConfig:{
                        refName:"formSearch", //el-form的ref名称--默认formSearch
                        labelPosition:"right", //el-form的label对齐方式--默认right
                        labelSuffix:"：", //el-form的label后缀--默认为：
                        size:"default" //el-form的表单大小--默认small
                    },
                    // 搜索表单结构相关配置项
                    itemConfig:[
                        {
                            dataName:"name", //对应后台数据名
                            labelName:"", //label文字名称
                            className:"", //el-form-item元素的自定义类名
                            type:"input", //表单输入类型--默认为input
                            dataListName:"", //拉数据名对应selectLists中属性--当type为select时生效
                            slotName:"", //slot元素name名称，仅当type为slot时生效
                            inputType:"text", //表单input类型--默认为text--仅当type为input时生效
                            prefixIcon:"", //输入框前置内置图标
                            prefixSlotName:"", //输入框前置内置图标插槽名称
                            suffixIcon:"", //输入框后置内置图标
                            suffixSlotName:"", //输入框后置内置图标插槽名称
                            className:"", //el-form-item的自定义类名
                            clearable:true, //是否可以一键清空--默认true
                            disabled:false, //是否禁用--默认false
                            placeholder:"", //表单提示语
                            startPlaceholder:"", //日期开始提示语
                            endPlaceholder:"", //日期结束提示语
                            width:150, //元素宽度，不写默认为150px
                            disabledDate:"event", //设置禁用日期的方法，仅当type为date时生效
                            defaultTime:new Date(2000,1,1,8,30,0), // 当选择时间时默认选中的时分秒时刻，默认8点半
                        }
                    ],
                    // 展开时搜索表单结构配置项，同上一致
                    moreItemConfig:[
                        {

                        }
                    ],
                    // 下拉列表数据配置
                    selectLists:{},
                    // 表单需要提交的数据配置
                    submitData:{},
                    // 搜索栏右侧按钮数据配置
                    buttonConfig:[
                        {
                            btnName:"按钮", //按钮名称
                            type:"primary", //按钮类型
                            size:"small", //按钮大小
                            className:"", //按钮自定义类名
                            formRefName:"", //表单元素DOM
                            click:"event" //点击事件
                        }
                    ]
                };
            }
        }
    `;
});


/*
    逻辑脚本代码区域
*/
const searchData=(formRef)=>{
    console.log(formRef);
};
// 点击重置按钮事件监听
const resetData=(formRef)=>{
    console.log(formRef);
};

// 搜索表单配置项
const searchConfig=reactive({
    moreConfig:{
        isShowMore:true
    },
    itemConfig:[
        {
            labelName:"工号",
            dataName:"employeeCode",
            type:"input",
            inputType:"text"
        },
        {
            labelName:"姓名",
            dataName:"userName",
            type:"input",
            inputType:"text"
        },
        {
            labelName:"社保所属地",
            dataName:"socialSecurityAddress",
            type:"input",
            inputType:"text"
        },
        {
            labelName:"部门",
            dataName:"deptName",
            type:"input",
            inputType:"text"
        }
    ],
    moreItemConfig:[
        {
            labelName:"年份",
            dataName:"year",
            type:"date",
            dateType:"year",
            format:"YYYY",
            valueFormat:"YYYY"
        },
        {
            labelName:"月份",
            dataName:"month",
            type:"select",
            dataListName:"monthList"
        },
        {
            labelName:"工作区间",
            dataName:"workInterval",
            type:"date",
            dateType:"daterange",
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD"
        }
    ],
    selectLists:{
        monthList:[
            {
                value:1,
                label:"一月"
            },
            {
                value:2,
                label:"二月"
            },
            {
                value:3,
                label:"三月"
            },
            {
                value:4,
                label:"四月"
            },
            {
                value:5,
                label:"五月"
            },
            {
                value:6,
                label:"六月"
            },
            {
                value:7,
                label:"七月"
            },
            {
                value:8,
                label:"八月"
            },
            {
                value:9,
                label:"九月"
            },
            {
                value:10,
                label:"十月"
            },
            {
                value:11,
                label:"十一月"
            },
            {
                value:12,
                label:"十二月"
            }
        ]
    },
    buttonConfig:[
        {
            btnName:"查询",
            type:"primary",
            size:"default",
            formRefName:searchConfigRef,
            click:searchData
        },
        {
            btnName:"重置",
            type:"default",
            size:"default",
            formRefName:searchConfigRef,
            click:resetData
        }
    ],
    submitData:{
        employeeCode:"",
        userName:"",
        socialSecurityAddress:"",
        deptName:"",
        year:"",
        month:"",
        workInterval:""
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
